<template>
   <p class="price">
    <span>￥199</span>
    <span>销量</span>
   </p>
   <button @click="onShare">分享</button>
   <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
        />
    <hr>
    <button @click="showServer=true">服务面板</button>
    <van-action-sheet v-model:show="showServer" :actions="actions" @select="onSelectServer" />
    <hr>
    <h2>动作栏</h2>
    <van-action-bar>
        <van-action-bar-icon @click="goHome" icon="wap-home-o" text="首页" />
        <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup>
import { ref } from 'vue';
const showShare = ref(false);
const onShare = ()=>{
    showShare.value = true;
}
const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];

const onSelect = (option) => {
    showShare.value = false;
};
//服务逻辑
const showServer = ref(false);
const actions = [
      { name: '7天无理由退货' },
      { name: '运费险' }
    ];
    const onSelectServer = (item) => {
    showServer.value = false;
};
import { RouterLink,useRouter } from 'vue-router';
const router = useRouter();
const goHome = (item) => {
    router.push("/");
};


</script>

<style scoped>
.price{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
</style>